<template>
    <div class="pagemain">
        <!-- 头部导航 -->
        <div class="header">
            <van-nav-bar title="设置" right-text="保存" left-arrow @click-left="toBack" @click-right="toSubmit" />
        </div>
        <!-- 内容 -->
        <div class="content">
            <div class="card">
                <!-- 头像 -->
                <div @click="toImg" class="item padding12">
                    <div>头像</div>
                    <img class="head-img" :src="alPath + 'zhonghui/user/' + user.userImg" alt="">
                </div>
                <!-- 昵称 -->
                <div class="item">
                    <van-field v-model="user.userName" label="昵称" placeholder="输入昵称" input-align="right" />
                </div>
            </div>
            <div class="card">
                <div class="item">
                    <van-field v-model="user.userTel" label="手机号" placeholder="暂无" input-align="right" />
                </div>
            </div>
            <div class="footer">
                <div @click="toExit">退出当前账户</div>
            </div>
        </div>

    </div>

</template>

<script>


import { editUser } from '../../network/user'
import { alPath } from "../../network/request";
export default {
    name: 'HomeR',
    data() {
        return {
            alPath,
            tel: '', //手机号
            show: false, //弹窗
            user_id: '',
            user: {},
            user_info: '',

            user: JSON.parse(localStorage.user),


        }
    },
    mounted() {

    },
    methods: {

        toInfo: function () {
            this.$router.push('/userInfo')
        },
        toSubmit: function () {
            if (this.user.userName.trim() == '') {
                this.$toast('请输入昵称')
                return false
            }

            let fd = new FormData();
            fd.append("userName", this.user.userName);
            fd.append("userId", localStorage.userId);
            fd.append("userTel", this.user.userTel);

            editUser(fd).then(res => {
                if (res.flag) {
                    localStorage.user = JSON.stringify(this.user)
                    this.$toast({
                        message: "修改成功",
                        position: "bottom"
                    });
                }
            })
        },
        toBack: function () {
            this.$router.go(-1)
        },
        toImg: function () {
            this.$router.push('/touxiang')
        },
        toExit: function () {
            this.$dialog.confirm({
                title: '中肽悦享',
                message: '是否退出登录？',
            })
                .then(function () {
                    localStorage.removeItem("user_id");
                    localStorage.removeItem("user");
                    localStorage.removeItem("shop_id");
                    localStorage.removeItem("shop");
                    this.$router.replace('/wxLogin')
                })
                .catch(function () {
                });
        },
    },
    created() {
        this.user = JSON.parse(localStorage.user)
    },
    //计算属性
    computed: {

    },
    filters: {

    }

}

</script>

<style lang='less' scoped>
.header .van-icon {
    color: #333;
    font-size: 40px;
    font-weight: bold;
}

.header .van-nav-bar__text {
    color: #333;
}

.header {
    position: fixed;
    z-index: 10;
    width: 100%;
    height: 88px;
    background-color: #fff;
    // padding-top: 60px;
}

.content {
    position: relative;
    padding: 0 24px;
    padding-top: 114px;
}

.head-img {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: block;
}

.card {
    background-color: #fff;
    border-radius: 16px;
    font-size: 28px;
    margin-bottom: 24px;
    overflow: hidden;
}

.padding12 {
    padding: 0 32px;
}

.item {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 88px;
    line-height: 88px;
    border-bottom: 2px solid #f2f2f2;
    font-size: 28px;
    color: #343434;
}

.item-col {
    position: relative;
    display: flex;
    height: 88px;
    line-height: 40px;
    border-bottom: 2px solid #f2f2f2;
    font-size: 28px;
    color: #343434;
}

.van-picker__confirm {
    position: relative;
    top: 20px;
    right: 24px;
    color: #fff;
    background-color: #ff3b14;
    width: 100px;
    padding: 0;
    height: 52px;
    line-height: 0;
    border-radius: 16px;
    font-size: 24px;
}

.van-picker__cancel {
    position: relative;
    top: 20px;
    left: 24px;
    color: #fff;
    background-color: #fff;
    color: #666;
    width: 100px;
    padding: 0;
    height: 52px;
    line-height: 0;
    border-radius: 16px;
    font-size: 24px;
    border: 2px solid #666;
}

.footer {
    position: relative;
    padding: 0 24px;
}

.footer>div {
    position: relative;
    width: 100%;
    border: none;
    border-radius: 16px;
    margin-bottom: 16px;
    box-shadow: none;
    color: #fff;
    height: 88px;
    line-height: 88px;
    text-align: center;
    background: -webkit-linear-gradient(left, #FF8023, #FF3B14);
    background: linear-gradient(to right, #FF8023, #FF3B14);
    border-radius: 50px;
    margin-top: 16px;
}

.myhead {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}

.myhead img {
    position: relative;
    top: 140px;
    width: 400px;
    height: 400px;
    border-radius: 50%;
}

.col-style {
    display: flex;
    flex-direction: column;
    text-align: left !important;
    padding: 32px;
}

.font12px {
    font-size: 24px;
    color: #999;
}

.row-style {
    display: flex;
    justify-content: space-between;
    margin-bottom: 8px;
}

.cancelBox {
    box-sizing: border-box;
    position: fixed;
    bottom: 20px;
    left: 0px;
    padding: 20px;
    width: 100%;
    font-size: 28px;
    color: #999;
    text-decoration: underline;
    text-align: center;
}

.popBox {
    width: 100%;
    height: 100%;
    padding: 20px;
}

.pagemain {
    background: #f2f2f2;
    height: 100vh;
}

/deep/.van-nav-bar__text,
/deep/.van-nav-bar__left,
/deep/.van-nav-bar .van-icon {
    color: #333;
}
</style>